<template>
	<view class="content">
		<view class="title">
			<view class="" @click="nav(0)" :class="i==0?'active':''">
				未使用
			</view>
			<view class="" @click="nav(1)" :class="i==1?'active':''">
				已使用/已过期
			</view>
		</view>
		<view class="coupon" v-for="i in 5">
			<view class="left">
				<view class="">
					1000
				</view>
				<view class="">
					满1000减200
				</view>
			</view>
			<view class="right">
				<view class="">
					女神节
				</view>
				<view class="">
					适用范围:所有商品
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Nav from '../../components/navbar.vue'
	export default {
		data() {
			return {
				i: 0,
			};
		},
		components: {
			Nav
		},
		methods: {
			nav(i) {
				this.i = i
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
	}
	.content {
		background-color: #fafafa;
		height: 100%;
		.title {
			display: flex;
			padding: 20rpx;

			view {
				flex: 1;
				text-align: center;

				padding-bottom: 5px;
			}

			.active {
				border-bottom: 2px solid #FF5344;
			}
		}

		.coupon {
			background: url('../../static/youhui.png') no-repeat center;
			padding:10rpx 70rpx;
			display: flex;
			margin: 20rpx 0;
			.right{
				& view:first-child{
					margin:20rpx 0;
					font-size: 20px;
					font-weight: bold;
				}
				& view:last-child{
					color:#999;
					font-size: 14px;
				}
			}
			.left{
				border-right: 1px dashed #aaa;
				padding-right: 8px;
				margin-right: 15px;
				& view:first-child{
					font-size: 24px;
					font-weight: bold;
					margin: 30rpx 0;
				}
				& view:last-child{
					font-size: 14px;
					margin-bottom: 30rpx;
					color: #999;
				}
			}
		}
	}
</style>
